<template>
  <div class="recommend">
    <Scroll :list="recommendSongList" :top="139" :bottom="60" ref="scroll">
      <div>
        <Swiper :swiperOptions="swiperOptions" :swiperList="swiperList" @img-ready="scrollRefresh"></Swiper>
        <SongList :recommendSongList="recommendSongList" @get-music-id="getMusicUrl"></SongList>
      </div>
    </Scroll>
  </div>
</template>

<script>
  import Swiper from '@/components/main/recommend/Swiper'
  import SongList from '@/components/main/recommend/SongList'
  import Scroll from '@/components/scroll'
  import tools from '@/assets/js/tools.js'
  import {
    mapMutations,
    mapGetters
  } from 'vuex'
  export default {
    data() {
      return {
        //轮播图配置
        swiperOptions: {
          pagination: {
            el: '.swiper-pagination'
          },
          loop: true,
          autoplay: {
            delay: 2000,
            disableOnInteraction: false
          }
        },
        //轮播图数据
        swiperList: [],
        //推荐歌单列表
        recommendSongList: [],
        sid: ''
      }
    },
    created() {
      this.getSwiperList()
      this.getRecommendSongList()
    },
    components: {
      Swiper,
      SongList,
      Scroll
    },
    methods: {
      ...mapMutations(['SET_MUSIC_URL','SET_MUSIC_NAME','SET_MUSIC_LYRIC','SET_MUSIC_TIME']),
      //获取轮播图数据
      async getSwiperList() {
        //const { data: res } = await this.$http.get('/recommend/banner');
        const res = await this.$http.get('/banner');
        //返回一个对象item => ({...})
        this.swiperList = res.data.banners.map(item => ({
          img: item.imageUrl,
          id: item.id
        }))
      },
      //获取推荐歌单数据
      async getRecommendSongList() {
        const { data: res } = await this.$http.get('/personalized/newsong')
        this.recommendSongList = res.result.map(item=>{
          let singer = ''
          for(var i=0;i<item.song.artists.length;i++){
            singer=singer+item.song.artists[i].name+','
          }
          let singers = singer.slice(0,-1)
          return{
            id: item.id,
            img: item.picUrl,
            name: item.name,
            singer: singers
          }
        })
      },
      scrollRefresh() {
        this.$refs.scroll.refresh()
      },
      //获取歌曲链接
      async getMusicUrl(id) {
        const {data: result} = await this.$http.get('/lyric?id='+id)
        let lyricRes = tools.handleLyric(result.lrc.lyric)
        this.SET_MUSIC_LYRIC(lyricRes.lyricArr)
        this.SET_MUSIC_TIME(lyricRes.timeArr)
        const {
          data: res
        } = await this.$http.get('/song/url?id=' + id)
        this.$parent.url = res.data[0].url
        const {data: resu} = await this.$http.get('/song/detail?ids='+id)
        this.SET_MUSIC_NAME(resu.songs[0].name)
      }

    }
  }
</script>

<style>
</style>
